<template>
  <div class="cookbook-model">
    <el-drawer title="编辑菜谱程序" direction="rtl" size="60%" :visible.sync="drawer">
      <div class="drawer_content">
        <el-form :model="recipeCommand" label-width="90px">
          <el-form-item label="菜谱⼤图：">
            <el-input v-model="recipeCommand.topImage" autocomplete="off"></el-input>
            <el-divider></el-divider>
          </el-form-item>
          <!-- 烹饪指令： -->
          <el-form-item label="烹饪指令：">
            <div v-for="(item, index) in recipeCommand.cookCommand" :key="index">
              <el-row v-for="(_item, _index) in item" :key="_index" class="data_row">
                <el-col :span="4">
                  <span>{{ _index }}</span>
                </el-col>
                <el-col :span="20" v-if="['步骤', '全熟', '溏心蛋'].includes(_index)">
                  <div class="stop_row" v-for="(_value, _key) in item[_index]" :key="_key">
                    <div v-for="(_tem, idx) in stepDispose(_value)" :key="idx" style="display:flex" :style="idx > 0 ? 'flex:1' : 'flex:5'">
                      <el-input
                        v-if="idx == 0"
                        type="textarea"
                        autosize
                        :placeholder="commandPrompt[idx]"
                        :value="_tem"
                        @input="stopInputChange(item[_index], _key, idx, $event)"
                      ></el-input>
                      <el-input
                        v-else
                        @input="stopInputChange(item[_index], _key, idx, $event)"
                        :placeholder="commandPrompt[idx]"
                        :value="_tem"
                      ></el-input>
                    </div>
                    <div class="row_opr">
                      <el-button @click="exchangeStop(item[_index], _key, 'Up')" size="mini" icon="el-icon-top" circle></el-button>
                      <el-button @click="exchangeStop(item[_index], _key, 'Down')" size="mini" icon="el-icon-bottom" circle></el-button>
                      <el-button @click="delStop(item[_index], _key)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                  </div>
                  <el-button class="add-btn" @click="addStop(item[_index])" icon="el-icon-plus" size="mini" type="primary">新增指令</el-button>
                </el-col>
                <el-col :span="20" v-else-if="_index == '预约'">
                  <el-radio v-model="item[_index]" :label="true">是</el-radio>
                  <el-radio v-model="item[_index]" :label="false">否</el-radio>
                </el-col>
                <el-col :span="20" v-else>
                  <el-input v-model="item[_index]" autocomplete="off" :placeholder="'请输入' + _index"></el-input>
                </el-col>
              </el-row>
            </div>
            <el-divider></el-divider>
          </el-form-item>
          <!-- 菜谱描述： -->
          <el-form-item label="菜谱描述：">
            <el-row v-for="(_item, _index) in recipeCommand.recipeIntro" :key="_index" class="data_row">
              <el-col :span="20">
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="recipeCommand.recipeIntro[_index]" autocomplete="off"></el-input>
              </el-col>
              <el-col :span="4">
                <div class="row_opr">
                  <el-button @click="zIndexUp(recipeCommand.recipeIntro, _index)" size="mini" icon="el-icon-top" circle></el-button>
                  <el-button @click="zIndexDown(recipeCommand.recipeIntro, _index)" size="mini" icon="el-icon-bottom" circle></el-button>
                  <el-button
                    @click="delIndexArr(recipeCommand.recipeIntro, _index)"
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </el-col>
            </el-row>
            <el-button class="add-btn" @click="recipeCommand.recipeIntro.push('')" icon="el-icon-plus" size="mini" type="primary"
              >新增菜谱描述</el-button
            >
            <el-divider></el-divider>
          </el-form-item>
          <!-- 准备⻝材： -->
          <el-form-item label="准备⻝材：">
            <el-row v-for="(_item, _index) in recipeCommand.prepareFood" :key="_index">
              <el-col :span="20">
                <div v-for="(value, key, index) in recipeCommand.prepareFood[_index]" :key="index" style="display:flex">
                  <el-input
                    @input="objInputChange(recipeCommand.prepareFood, _index, $event, value)"
                    placeholder="请输入食材名称"
                    :value="key"
                  ></el-input>
                  <el-input
                    @input="objInputChange(recipeCommand.prepareFood, _index, key, $event)"
                    placeholder="请输入食材数量"
                    :value="value"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button @click="zIndexUp(recipeCommand.prepareFood, _index)" size="mini" icon="el-icon-top" circle></el-button>
                <el-button @click="zIndexDown(recipeCommand.prepareFood, _index)" size="mini" icon="el-icon-bottom" circle></el-button>
                <el-button @click="delIndexArr(recipeCommand.prepareFood, _index)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
              </el-col>
            </el-row>
            <el-button class="add-btn" @click="recipeCommand.prepareFood.push({ '': '' })" icon="el-icon-plus" size="mini" type="primary"
              >新增食材</el-button
            >
            <el-divider></el-divider>
          </el-form-item>
          <!-- 做法步骤： -->
          <el-form-item label="做法步骤：">
            <el-row v-for="(_item, _index) in recipeCommand.cookProcess" :key="_index" style="margin-bottom:10px">
              <el-col :span="20">
                <div v-for="(value, key, index) in recipeCommand.cookProcess[_index]" :key="index" style="display:flex">
                  <el-input
                    type="textarea"
                    autosize
                    @input="objInputChange(recipeCommand.cookProcess, _index, $event, value)"
                    placeholder="请输入步骤描述"
                    :value="key"
                  ></el-input>
                  <el-input
                    type="textarea"
                    autosize
                    @input="objInputChange(recipeCommand.cookProcess, _index, key, $event)"
                    placeholder="请输入步骤图片"
                    :value="value"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button @click="zIndexUp(recipeCommand.cookProcess, _index)" size="mini" icon="el-icon-top" circle></el-button>
                <el-button @click="zIndexDown(recipeCommand.cookProcess, _index)" size="mini" icon="el-icon-bottom" circle></el-button>
                <el-button @click="delIndexArr(recipeCommand.cookProcess, _index)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
              </el-col>
            </el-row>
            <el-button class="add-btn" @click="recipeCommand.cookProcess.push({ '': '' })" icon="el-icon-plus" size="mini" type="primary"
              >新增做法步骤</el-button
            >
            <el-divider></el-divider>
          </el-form-item>
        </el-form>
        <div class="drawer__footer">
          <el-button @click="drawerClose()">取 消</el-button>
          <el-button type="primary" @click="drawerConfirm()">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      drawer: false,
      recipeCommand: {
        topImage: '', //菜谱⼤图
        cookCommand: [], //烹饪指令
        recipeIntro: [], //菜谱描述
        prepareFood: [], //准备⻝材
        cookProcess: [], //做法步骤
      },
      commandPrompt: ['步骤描述', '步骤', '时间', '火力', '档位'],
    }
  },
  methods: {
    drawerClose() {
      this.drawer = false
    },
    drawerOpen() {
      const data = this.data
      if (data != null) {
        this.recipeCommand = JSON.parse(data).recipeCommand
      } else {
        const cookCommand = new Map()
        cookCommand.set('份量', '')
        cookCommand.set('总时间', '')
        cookCommand.set('步骤', ['_{}_{}_{}_{}'])
        cookCommand.set('预约', '')
        this.recipeCommand.cookCommand = [this._strMapToObj(cookCommand)]
        this.recipeCommand.recipeIntro.push('')
        this.recipeCommand.prepareFood.push({ '': '' })
        this.recipeCommand.cookProcess.push({ '': '' })
      }
      this.drawer = true
    },

    //确认按钮
    drawerConfirm() {
      const map = new Map()
      map.set('recipeCommand', this.recipeCommand)
      const json = this._mapToJson(map)
      this.$emit('recipeCommandChange', json)
    },

    //步骤字符串处理
    stepDispose(data) {
      const arr = new Array()
      const splitData = data.split('_')
      for (let i in splitData) {
        if (i == 0) {
          arr.push(splitData[i])
        } else {
          arr.push(splitData[i].substring(1, splitData[i].length - 1).trim())
        }
      }
      return arr
    },

    //新增步骤
    addStop(data) {
      const maxStop = 16
      if (data.length < maxStop) {
        data.push(`_{${data.length + 1}}_{}_{}_{}`)
      } else {
        this.$message({
          message: `最多增加${maxStop}个步骤！！！`,
          type: 'warning',
        })
      }
    },

    //删除步骤行
    delStop(data, index) {
      this.delIndexArr(data, index)
      this.rearrangementStop(data)
    },
    //步骤行换位
    exchangeStop(data, index, exchangeType) {
      console.log(data)
      switch (exchangeType) {
        case 'Up':
          this.zIndexUp(data, index)
          break
        case 'Down':
          this.zIndexDown(data, index)
          break
        default:
          this.$message.error('发生错误')
          break
      }
      this.rearrangementStop(data)
    },

    //重排步骤行
    rearrangementStop(data) {
      for (let i in data) {
        const splitData = data[i].split('_')
        splitData[1] = `{${parseInt(i) + 1}}`
        let str = `${splitData[0]}_${splitData[1]}_${splitData[2]}_${splitData[3]}_${splitData[4]}`
        data[i] = str
      }
    },

    //步骤input改变
    stopInputChange(data, stopIdx, alterIdx, event) {
      const splitData = data[stopIdx].split('_')
      if (alterIdx === 0) {
        splitData[0] = event
      } else {
        splitData[alterIdx] = `{${event}}`
      }
      let str = `${splitData[0]}_${splitData[1]}_${splitData[2]}_${splitData[3]}_${splitData[4]}`
      data[stopIdx] = str
      //强制更新视图
      this.$forceUpdate()
    },

    //对象输入框改变
    objInputChange(arr, index, key, value) {
      const obj = {}
      obj[key] = value
      arr[index] = obj
      //强制更新视图
      this.$forceUpdate()
    },
  },
}
</script>

<style scoped>
.drawer_content {
  padding: 30px;
}
.data_row {
  margin-bottom: 10px;
}
.stop_row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.stop_row > span {
  width: 15px;
}
.row_opr {
  margin-left: 10px;
  display: flex;
}
.add-btn {
  display: block;
  margin: auto;
  margin-top: 15px;
}
</style>
